<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优讯通用户管理</title>
    <link href="./layui/css/layui.css" rel="stylesheet">
    <link href="./css/uxt_user.css" rel="stylesheet">
</head>

<body>
    <div class="uxt-page">
        <div class="layui-card">
            <div class="layui-card-header">优讯通用户管理</div>
            <div class="layui-card-body">
                <div class="uxt-toolbar">
                    <div class="layui-row">
                        <div class="layui-col-md8">
                            <!-- 左侧搜索区域 -->
                            <div class="layui-form">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">搜索</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="searchInput" placeholder="用户名/姓名/手机号"
                                                class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">日期范围</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="dateRange" placeholder="选择日期范围" class="layui-input"
                                                readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <!-- 右侧操作区域 -->
                            <div class="uxt-actions" style="text-align: right;">
                                <button type="button" class="layui-btn layui-btn-sm" id="btnSearch"><i
                                        class="layui-icon">&#xe615;</i> 搜索</button>
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btnReset"><i
                                        class="layui-icon">&#xe669;</i> 重置</button>
                                <button class="layui-btn layui-btn-sm" id="btnAddUser"><i
                                        class="layui-icon">&#xe654;</i> 添加用户</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="uxtUserTable" lay-filter="uxtUserTable"></table>
            </div>
        </div>
    </div>

    <!-- 行内操作栏模板 -->
    <script type="text/html" id="tplRowActions">
        <div class="layui-btn-group">
            <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="role">修改角色</a>
            <a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="toggle">禁用</a>
            <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>
        </div>
    </script>

    <!-- 用户表单模板 -->
    <script type="text/html" id="tplUserForm">
        <form class="layui-form" lay-filter="uxtUserForm" style="padding: 16px 24px 0 0;">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="realname" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="mobile" required lay-verify="required|phoneCN" placeholder="请输入手机号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <input type="text" name="department" required lay-verify="required" placeholder="请输入部门" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户类型</label>
                <div class="layui-input-block">
                    <select name="userType" lay-verify="required">
                        <option value="">请选择</option>
                        <option value="管理员">管理员</option>
                        <option value="普通用户">普通用户</option>
                        <option value="访客">访客</option>
                    </select>
                </div>
            </div>
            <!-- 操作按钮由 JS 通过 layer.open 的 btn 参数生成，这里不内置按钮 -->
        </form>
    </script>

    <!-- 角色表单模板 -->
    <script type="text/html" id="tplRoleForm">
        <form class="layui-form" lay-filter="uxtRoleForm" style="padding: 16px 24px 0 0;">
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="roles" title="查看" checked>
                    <input type="checkbox" name="roles" title="编辑">
                    <input type="checkbox" name="roles" title="管理员">
                </div>
            </div>
            <!-- 操作按钮由 JS 通过 layer.open 的 btn 参数生成，这里不内置按钮 -->
        </form>
    </script>

    <script src="./layui/layui.js"></script>
    <script src="./js/uxt_user.js"></script>
</body>

</html>